Rendering SVGs in a notebook

This shows how you can draw SVGs in notebooks using the elm/svg module.

To do this, you need to make sure you have an elm.json in the same directory as the notebook. The elm.json needs to have a dependency on elm/svg, something like this:

{
    "type": "application",
    "source-directories": [],
    "elm-version": "0.19.0",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.1",
            "elm/core": "1.0.2",
            "elm/html": "1.0.0",
            "elm/svg": "1.0.1"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

Basic SVG example



In [ ]:

    
import Html
import Svg exposing (..)
import Svg.Attributes exposing (..)

main = 
    svg [stroke "#f00"] [line [x1 "0", y1 "1", x2 "100", y2 "100"] []]
    
-- compile-code

A more complex example



In [ ]:

    
import Svg exposing (..)
import Svg.Attributes exposing (..)

main =
    svg
        [ version "1.1", x "0", y "0", viewBox "0 0 323.141 322.95", height "200px", width "200px"
        ]
        [ polygon [ fill "#F0AD00", points "161.649,152.782 231.514,82.916 91.783,82.916" ] []
        , polygon [ fill "#7FD13B", points "8.867,0 79.241,70.375 232.213,70.375 161.838,0" ] []
        , rect
            [ fill "#7FD13B", x "192.99", y "107.392", width "107.676", height "108.167"
            , transform "matrix(0.7071 0.7071 -0.7071 0.7071 186.4727 -127.2386)"
            ]
            []
        , polygon [ fill "#60B5CC", points "323.298,143.724 323.298,0 179.573,0" ] []
        , polygon [ fill "#5A6378", points "152.781,161.649 0,8.868 0,314.432" ] []
        , polygon [ fill "#F0AD00", points "255.522,246.655 323.298,314.432 323.298,178.879" ] []
        , polygon [ fill "#60B5CC", points "161.649,170.517 8.869,323.298 314.43,323.298" ] []
    ]
    
-- compile-code